<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highcharts Example</title>

		<!--<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>-->
		<script src="js/jquery-2.2.0.min.js"></script>
		<style type="text/css">
		#container, #sliders {
		    min-width: 310px; 
		    max-width: 800px;
		    margin: 0 auto;
		}
		#container {
		    height: 400px; 
		}
		</style>
		<script type="text/javascript">
		$(function () {
			alert("tesst");
		    // Set up the chart
		    var chart = new Highcharts.Chart({
		        chart: {
		            renderTo: 'container',
		            type: 'column',
		            options3d: {
		                enabled: true,
		                alpha: 15,
		                beta: 15,
		                depth: 50,
		                viewDistance: 25
		            }
		        },
		        title: {
		            text: 'Chart rotation demo'
		        },
		        subtitle: {
		            text: 'Test options by dragging the sliders below'
		        },
		        plotOptions: {
		            column: {
		                depth: 25
		            }
		        },
		        series: [{
		            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
		        }]
		    });
		
		    function showValues() {
		        $('#alpha-value').html(chart.options.chart.options3d.alpha);
		        $('#beta-value').html(chart.options.chart.options3d.beta);
		        $('#depth-value').html(chart.options.chart.options3d.depth);
		    }
		
		    // Activate the sliders
		    $('#sliders input').on('input change', function () {
		        chart.options.chart.options3d[this.id] = this.value;
		        showValues();
		        chart.redraw(false);
		    });
		
		    showValues();
		});
		</script>
	</head>
	<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>
<div id="sliders">
    <table>
        <tr>
        	<td>Alpha Angle</td>
        	<td><input id="alpha" type="range" min="0" max="45" value="15"/> <span id="alpha-value" class="value"></span></td>
        </tr>
        <tr>
        	<td>Beta Angle</td>
        	<td><input id="beta" type="range" min="-45" max="45" value="15"/> <span id="beta-value" class="value"></span></td>
        </tr>
        <tr>
        	<td>Depth</td>
        	<td><input id="depth" type="range" min="20" max="100" value="50"/> <span id="depth-value" class="value"></span></td>
        </tr>
    </table>
</div>
	</body>
</html>
